<template>
  <el-table :data="tableData" border @selection-change="check">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" width="55" fixed />
    <el-table-column prop="productName" label="商品名称" width="150" fixed />
    <el-table-column prop="productImg" label="商品图片" width="150" fixed >
      <template #default="scope">
        <el-image style="width: 100px; height: 100px" :src="scope.row.productImg" />
      </template>
    </el-table-column>
    <el-table-column prop="price" label="商品价格" width="150" fixed />
    <el-table-column prop="quantity" label="商品数量" width="150" fixed ></el-table-column>
    <el-table-column prop="productTag" label="商品备注" width="150" fixed />
    <el-table-column prop="createAt" label="添加时间" width="150" fixed />

    <el-table-column label="操作" width="200" fixed="right">
      <template #default="scope">
<!--        <el-button type="primary">查看详情</el-button>-->
        <el-popconfirm @confirm="del(scope.row)" width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon-color="#626AEF"
          title="确认删除当前商品?">
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>

        <el-input-number step-strictly @change="fixNum(scope.row)" v-model="scope.row.quantity" size="small" />

      </template>
    </el-table-column>
  </el-table>
  <div class="Shopping">
    <div>当前总价为：<span>{{ allPrice }}</span></div>
    <div>当前数量为：<span>{{ allQuantity }}</span></div>
  </div>
  <el-button @click="sum" type="success" size="large" style="width: 100px;">结算</el-button>
</template>

<script setup>
import {computed, onMounted, ref, watchEffect} from 'vue';
import ElMessage, {ElNotification} from "element-plus";
import {BaseURL} from "../../ApI/member";

let tableData = ref([]);
let checkData = ref([]);
let cartID = ref('');
let num = ref(0);
const id = localStorage.getItem("id")

onMounted(()=>{
  fetch(`http://120.78.158.4:4558/carts/cart/${id}`).then(j=>j.json())
    .then((json)=>{
      cartID.value = json.msg;
      const cartData = Array.from(json.data);
      tableData.value = cartData;
    });
})
const check = (v) => {
  checkData.value = v;
}

const del = (v) => {
  console.log(cartID)
  fetch(BaseURL+`/carts/${cartID.value}/items/${v.id}`,{
    method: 'DELETE',
    headers: {
      "content-type": "application/json",
    },
  }).finally((data)=>{
      fetch(BaseURL+`/carts/cart/${id}`).then(j=>j.json())
        .then((json)=>{
          cartID.value = json.msg;
          const cartData = Array.from(json.data);
          tableData.value = cartData;
        });
    });

}

const fixNum = (val)=>{
  fetch(BaseURL+`/carts/${cartID.value}/items/${val.id}`,{    headers: {
      "content-type": "application/json",
    },method:'PUT',body:JSON.stringify(val)})
    .finally(()=>{
      fetch(BaseURL+`/carts/cart/${id}`).then(j=>j.json())
          .then((json)=>{
            cartID.value = json.msg;
            const cartData = Array.from(json.data);
            tableData.value = cartData;
          });
    });
}

const sum = ()=>{
  let val = checkData.value.map(v=>v.id);
  if (val.length === 0) return;
  fetch(BaseURL+`/carts/money/${id}`,{    headers: {
      "content-type": "application/json",
    },method:'PUT',body:JSON.stringify(val)}).then(j=>j.json())
      .then((v)=>{
        if (v.code ==='1000') return alert('余额不够');
      })
      .finally((v)=>{
        fetch(BaseURL+`/carts/cart/${id}`).then(j=>j.json())
            .then((json)=>{
              cartID.value = json.msg;
              const cartData = Array.from(json.data);
              tableData.value = cartData;
            });
      });
}

const allPrice = computed(()=>(
    checkData.value.reduce((v1,v2)=>v1+Math.floor(v2.price*v2.quantity),0)
));
const allQuantity = computed(()=>(
    checkData.value.reduce((v1,v2)=>v1+v2.quantity,0)
));
</script>

<style scoped lang="less">
.Shopping {
  margin-top: 10px;
  justify-content: flex-end;
  display: flex;
  span{
    font-size: 14px;
  }

}
</style>
